<template>
  <div id="detail-comment" v-if="goodsComment !== undefined">
    <div class="comment-nav">
      <span>用户评价</span>
      <span>更多</span>
    </div>
    <div class="comment-main">
      <div class="comment-main-userInfo">
        <img :src="goodsComment.headPhoto" alt="">
        <span>{{goodsComment.userName}}</span>
      </div>
      <div class="comment-main-text">
        {{goodsComment.content}}
      </div>
      <div class="comment-main-buyInfo">
        <span>{{goodsComment.createTime | transformDate}}</span>
        <span>{{goodsComment.styleInfo}}</span>
      </div>
      <div class="comment-main-image" v-if="goodsComment.images !== undefined">
        <img v-for="(item, index) in goodsComment.images" :key="index"
             :src="item" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import {formatDate} from "@/common/utils";

export default {
  name: "DetailComment",
  props: {
    goodsComment: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  filters: {
    transformDate(date) {
      const newDate = new Date(date * 1000);
      return formatDate(newDate, 'yyyy/MM/dd');
    }
  }
}
</script>

<style scoped lang="less">
  #detail-comment {
    margin: 10px 0;
    padding: 0 10px;
    background-color: #fff;
  }
  .comment-nav {
    height: 44px;
    line-height: 44px;
    span:first-child {
      float: left;
      font-size: 18px;
    }
    span:last-child {
      float: right;
    }
    span:last-child::after {
      content: '';
      display: inline-block;
      margin-left: 6px;
      width: 10px;
      height: 10px;
      border-right: 2px solid #000000;
      border-bottom: 2px solid #000000;
      transform: rotate(-45deg);
    }
  }
  .comment-main {
    padding-bottom: 20px;
  }
  .comment-main-userInfo {
    height: 60px;
    line-height: 60px;
    img {
      width: 48px;
      height: 48px;
      vertical-align: middle;
      border-radius: 24px;
    }
    span {
      margin-left: 10px;
    }
  }
  .comment-main-text {
    margin: 20px 0;
  }
  .comment-main-buyInfo {
    color: #b6b6b6;
    span:first-child {
      margin-right: 10px;
    }
  }
  .comment-main-image {
    margin-top: 20px;
    img {
      height: 64px;
    }
  }
</style>